<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=320,user-scalable=no,target-densitydpi=medium-dpi" />
<title>无标题文档</title>
<script>
document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/3+"px";
</script>
<style>
body,ul{margin:0;padding:0; font-size:0.15rem; font-family:Arial,"宋体";}
li{ list-style:none;}
a{ text-decoration:none;color:#fff;}
.page{ width:100%;height:100%; position:absolute; overflow:hidden; left:0;top:0;}
header{ height:0.45rem; border-top:2px solid #353535; border-bottom:2px solid #353535;box-sizing:border-box;background:-webkit-linear-gradient(top,#292929,#1e1e1e);background:-moz-linear-gradient(top,#292929,#1e1e1e);background:linear-gradient(top,#292929,#1e1e1e); color:#fff; line-height:0.45rem; text-align:center;}
.btn{height:0.25rem; position:absolute; width:0.5rem; top:0.05rem; border:2px solid #0d0d0d; line-height:0.25rem; right:10px; border-radius:5px; box-shadow:0 0 3px #0d0d0d,inset 0 0 2px #232323;}
.btn:nth-of-type(1){ left:10px; right:auto;}
.wrap{ position:absolute;left:0;width:100%;top:0.45rem;bottom:0.55rem;overflow:auto;}
footer{height:0.55rem; position:absolute;left:0;bottom:0;width:100%;background:#000;background:-webkit-linear-gradient(top,#1e1f21,#121212);background:-moz-linear-gradient(top,#1e1f21,#121212);background:linear-gradient(top,#1e1f21,#121212); line-height:0.55rem;}
footer a{float:left;width:50%; text-align:center; box-sizing:border-box;}
footer a:nth-of-type(1){border-right:1px solid #222222;}
footer a:nth-of-type(2){border-left:1px solid #222222;}
footer a.active{background:-webkit-linear-gradient(top,#101010,#070707);background:-moz-linear-gradient(top,#101010,#070707);background:linear-gradient(top,#101010,#070707); border-color:#0e0e0e;}
.picList li{float:left;width:1rem;height:1rem;background:url(demo/video/1.jpg) no-repeat; background-size:cover; border:1px solid #000; box-sizing:border-box;}
.recycle{width:1.2rem;height:1.2rem; background:url(demo/img/recycle.png) no-repeat; background-size:cover; position:absolute;left:calc(50% - 0.6rem);top:100%;}
.recycle:nth-of-type(1){ background-image:url(demo/img/recycle2.png);}
</style>
</head>
<body>
<article class="page">
	<header>
    	<a href="javascript:;" class="btn">删除</a>
        相机相册
        <a href="javascript:;" class="btn">选择</a>
    </header>
    <section class="wrap">
    	<ul class="picList">
        	<li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
    <footer>
    	<a href="javascript:;" class="active">相机相册</a>
        <a href="javascript:;">所有相册</a>
    </footer>
    <span class="recycle"></span>
    <span class="recycle"></span>
</article>
</body>
</html>
